<template>
  <ul>
    <!-- 抽屉 -->
    <!-- :title="`${this.songdetail.name} - ${this.songdetail.artist}`" -->
    <!-- :with-header="false" -->
    <el-drawer v-model="drawer" :with-header="false" size="50%">
      <div class="songbox">
        <h2>{{ this.songdetail.name }}</h2>
        <h3>{{ this.songdetail.artist }}</h3>
        <div class="songbox-main">
          <div class="box-left">
            <img class="songdetail-img" :src="this.songdetail.cover" alt="">
            <audio controls="controls" loop="loop" preload="auto" :src="this.songdetail.url"> 你的浏览器不支持audio标签
            </audio>
          </div>
          <div>
            <button v-if="flag" @click="getsongwords(this.songdetail.lrc); flag = !flag "
              style="cursor: pointer;">获取歌词</button>
            <!-- 保留空白符序列，但是正常地进行换行。 -->
            <div v-else class="lyricPanel" style="white-space: pre-wrap;">
              {{ this.resss }}
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 歌曲 -->
    <li v-for="song in songs" :key="song.id">
      <!-- 播放icon -->
      <el-icon class="playicon">
        <VideoPlay />
      </el-icon>
      <!-- 样式hover -->
      <div class="hoverstyle" @click="getAudioInfo(song.id)" style="cursor: pointer;">
        <el-icon class="iconlogo">
          <VideoPlay />
        </el-icon>
      </div>
      <!-- 音乐图片 -->
      <img :src="song.picUrl" alt="">
      <!-- 音乐信息-歌曲名，作者等 -->
      <section>
        <p class="songname" @click="drawer = true; getAudioInfo(song.id);" style="cursor: pointer;">
          {{ song.name }}
          <span class="songdata" v-for="data in song.song.alias">
            {{ data }}
          </span>
        </p>
        <p class="art">
          <span v-for="artist in song.song.artists" :key="artist.id">
            {{ artist.name }}
            <!-- {{ song.song.artists.length }} -->
            <span v-if="song.song.artists.length > 1">/</span>
          </span>
        </p>
      </section>
    </li>
  </ul>
</template>

<script>
// 获取音乐url接口，获取歌词接口，获取歌曲详情接口
import { songUrlInterface, lyricsInterface, songDetailsInterface } from '../../api/artist'
import { mapMutations, mapState } from 'vuex'
import { VideoPlay } from '@element-plus/icons-vue'
import { getNewSongsInterface } from '../../api/user'
export default {
  created() {
    this.getNewSong()
  },
  data() {
    return {
      // 将获取到的数据放入songs数组中
      songs: [],
      drawer: false,
      // 歌曲详情
      songdetail: {},
      resss: "",
      flag: true
    }
  },
  computed: {
    ...mapState('playListModule', ['audioInfo', 'songInfo', 'lyric'])
  },
  watch: {
    audioInfo: {
      handler() {
        this.songdetail = this.audioInfo
      }
    }
  },
  methods: {
    getNewSong() {
      getNewSongsInterface().then(res => {
        // console.log('res', res.result);
        this.songs = res.result
      })
    },
    ...mapMutations('playListModule', ['SET_LYRIC', 'SET_AUDIO_INFO', 'SET_SONG_INFO']),
    async getAudioInfo(id) {
      await songDetailsInterface({ ids: id }).then(res => {
        this.SET_SONG_INFO(res.songs[0])
      })
      songUrlInterface({ id, level: 'standard' }).then(async (res) => {
        await lyricsInterface({ id }).then(res => {
          this.SET_LYRIC(res.lrc.lyric)
          this.audioInfo.lrc = res.lrc.lyric
          // console.log('this.audioInfo.lrc', this.audioInfo.lrc);
        })
        this.SET_AUDIO_INFO({
          // 歌曲id
          id: this.id,
          // 歌名
          name: this.songInfo.name || '',
          //  作者名
          artist: this.songInfo.ar[0].name || '',
          // 音乐地址
          url: res?.data?.[0].url,
          // 音乐封面
          cover: this.songInfo.al.picUrl || '',
          // 歌词
          lrc: this.lyric || ''
        })
      })
    },
    // 截取歌词
    getsongwords(songdetail) {
      const songwords = songdetail?.split('\n')
      const result = songwords?.map((item) => item.substring(11))
      this.resss = result.join("\n")
      // console.log('this.audioInfo.lrc', this.audioInfo.lrc);
    },
  },
  components: {
    VideoPlay
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

li {
  list-style: none;
  background-color: rgb(247, 239, 240);
  margin: 15px;
  width: 350px;
  display: flex;
  border-radius: 15px;
  position: relative;

  .playicon {
    width: 85px;
    height: 85px;
    position: absolute;
    font-size: 35px;
    color: rgb(236, 65, 65);
  }

  .songname:hover {
    color: rgb(236, 65, 65);
  }

  img {
    width: 85px;
    height: 85px;
    border-radius: 10px;
    margin-right: 20px;
    // background-color: #666;
  }

  .hoverstyle {
    width: 85px;
    height: 85px;
    background-color: rgba(14, 14, 14, 0);
    position: absolute;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

    .iconlogo {
      width: 85px;
      height: 85px;
      background-color: rgba(14, 14, 14, 0);
      color: rgb(224, 222, 222, 0);
      font-size: 40px;
      position: absolute;
      border-radius: 10px;
    }

    .iconlogo:hover {
      background-color: rgba(14, 14, 14, 0.6);
      color: rgba(224, 222, 222);
    }
  }

  section {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 16px;
    width: 210px;

    .songname {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .songdata {
        margin-left: 5px;
        font-size: 14px;
        color: #ada4a4;
      }
    }

    .art {
      display: flex;
      color: #666;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        margin-right: 5px;
      }
    }
  }
}


// 音乐详情 - 抽屉
.songbox {
  background-color: rgb(159, 151, 151);
  height: 100%;
  overflow: hidden;
}

h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  margin-top: 20px
}

h3 {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
}

.songdetail-img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 20px solid #2e2e2e;
  padding: 20px;
  background-color: #666;
  margin-bottom: 30px;
  margin-top: 30px;
}

button {
  width: 250px;
  height: 50px;
  background-color: #b0aeae;
  border: 1px solid #666;
  border-radius: 5px;
  font-size: 20px;
  color: #5f5e5e;
}

audio {
  margin-top: 5px;
  margin-top: 10px;
}

.songbox-main {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.box-left {
  width: 40%;
}

.lyricPanel {
  width: 350px;
  height: 450px;
  // border: 1px solid rgb(136, 130, 130);
  border-radius: 10px;
  overflow-y: scroll;
  color: #2e2e2e;
  line-height: 18px;
  margin-top: 20px;
}
</style>
